<!-- eslint-disable no-undef -->
<!-- eslint-disable no-undef -->
<template>
  <xh-container title="登录" hideBack>
    <view class="normal-login-container">
      <view class="logo-content align-center justify-center flex">
        <text class="title">移动端登录</text>
      </view>
      <view class="login-form-content">
        <view class="input-item flex align-center">
          <view class="iconfont icon-user icon"></view>
          <input
            v-model="loginForm.username"
            class="input"
            type="text"
            placeholder="请输入账号"
            maxlength="30"
            @input="handleNameChange"
          />
        </view>
        <view class="input-item flex align-center">
          <view class="iconfont icon-password icon"></view>
          <input
            v-model="loginForm.password"
            type="password"
            class="input"
            placeholder="请输入密码"
            maxlength="20"
          />
        </view>
        <view
          class="input-item flex align-center"
          style="width: 60%; margin: 0px"
          v-if="captchaEnabled"
        >
          <view class="iconfont icon-code icon"></view>
          <input
            v-model="loginForm.code"
            type="number"
            class="input"
            placeholder="请输入验证码"
            maxlength="4"
          />
          <view class="login-code">
            <image
              :src="codeUrl"
              @click="getCode"
              class="login-code-img"
            ></image>
          </view>
        </view>
        <view class="memory-wrapper">
          <uni-data-checkbox
            v-model="isMemory"
            multiple
            :localdata="[{ text: '记住账号', value: '1' }]"
          />
        </view>
        <view class="action-btn">
          <button
            @click="handleLogin"
            class="login-btn cu-btn block bg-blue lg round"
          >
            登录
          </button>
        </view>
        <view class="reg text-center" v-if="register">
          <text class="text-grey1">没有账号？</text>
          <text @click="handleUserRegister" class="text-blue">立即注册</text>
        </view>
        <view class="xieyi text-center">
          <uni-data-checkbox
            v-model="isRead"
            multiple
            :localdata="[{ text: '请阅读', value: 'isRead' }]"
          />
          <text @click="handleUserAgrement" class="text-blue"
            >《用户协议》</text
          >
          <!-- <text
						@click="handlePrivacy"
						class="text-blue"
						>《隐私协议》</text
					> -->
        </view>
      </view>
    </view>
  </xh-container>
</template>

<script>
import { getCodeImg } from "@/api/login";
import AppStorage from "../utils/appStorage";
import xhContainer from "../components/xh-container/xh-container.vue";
export default {
  components: { xhContainer },
  name: "loginPage",
  data() {
    return {
      isMemory: ["1"],
      isRead: ["isRead"],
      codeUrl: "",
      captchaEnabled: true,
      // 用户注册开关
      register: false,
      // globalConfig: getApp().globalData.config,
      loginForm: {
        username: "",
        password: "",
        code: "",
        uuid: "",
      },
    };
  },
  created() {
    this.getCode();
  },
  onShow() {
    // this.isRead = AppStorage.get('isRead') ? ['isRead'] : [];
    const loginInfo = AppStorage.get("login_Info") || {};
    this.loginForm = loginInfo;
  },
  methods: {
    handleNameChange() {
      if (this.loginForm.password) {
        this.loginForm.password = "";
      }
    },
    handleSetLoginInfo() {},
    // 用户注册
    handleUserRegister() {
      this.$nav.redirectTo(`/pages/register`);
    },
    // 用户协议
    handleUserAgrement() {
      this.$nav.navigateTo(`/pages/common/userProtocol/index`);
    },
    // 获取图形验证码
    getCode() {
      getCodeImg().then((res) => {
        this.captchaEnabled =
          res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    // 登录方法
    async handleLogin() {
      if (this.loginForm.username === "") {
        this.$modal.msgError("请输入您的账号");
      } else if (this.loginForm.password === "") {
        this.$modal.msgError("请输入您的密码");
      } else {
        if (this.isRead.length) {
          this.$modal.loading("登录中，请耐心等待...");
          this.pwdLogin();
        } else {
          this.$modal.msgError("请阅读用户协议");
        }
      }
    },
    // 密码登录
    async pwdLogin() {
      this.$store
        .dispatch("Login", this.loginForm)
        .then(() => {
          this.$modal.closeLoading();
          this.loginSuccess();
        })
        .catch(() => {
          if (this.captchaEnabled) {
            this.getCode();
          }
        });
    },
    // 登录成功后，处理函数
    loginSuccess() {
      // 保存用户信息到本地
      const { username, password } = this.loginForm;
      let params = {};
      if (this.isMemory.length) {
        params = { username, password };
      }
      AppStorage.set("login_Info", params);
      // 设置用户信息
      this.$store.dispatch("GetInfo").then(() => {
        this.$nav.reLaunch("/pages/index");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #ffffff;
}

.normal-login-container {
  width: 100%;
  border-top: 1px solid $uni-border-color;
  .logo-content {
    width: 100%;
    font-size: 21px;
    text-align: center;
    padding-top: 15%;

    image {
      border-radius: 4px;
    }

    .title {
      margin-left: 10px;
    }
  }

  .login-form-content {
    text-align: center;
    margin: 20px auto;
    margin-top: 15%;
    width: 80%;

    .input-item {
      margin: 20px auto;
      background-color: #f5f6f7;
      height: 45px;
      border-radius: 20px;

      .icon {
        font-size: 38rpx;
        margin-left: 10px;
        color: #999;
      }

      .input {
        width: 100%;
        font-size: 14px;
        line-height: 20px;
        text-align: left;
        padding-left: 15px;
      }
    }

    .login-btn {
      margin-top: 40px;
      height: 45px;
    }

    .reg {
      margin-top: 15px;
    }

    .xieyi {
      color: #333;
      margin-top: 20px;
      display: flex;
    }

    .login-code {
      height: 38px;
      float: right;

      .login-code-img {
        height: 38px;
        position: absolute;
        margin-left: 10px;
        width: 200rpx;
      }
    }
  }
  .text-blue {
    margin-top: 2px;
  }
}
.memory-wrapper {
  margin: 5px 0 0 5px;
}
</style>
